<template>
    <div class="xy-f-designer">
        <a-row :gutter="10" class="h-full flex justify-between">
            <a-col :span="5">
                <!-- 左侧拖拽区域 -->
                <div class="widget-draggable h-full">
                    <widget-draggable ref="widgetListRef"/>
                </div>
            </a-col>
            <a-col :span="8">
                <!-- 设计器主体 -->
                <div class="designer-container h-full p-2 bg-white">
                    <designer-box 
                        :designer="designer"
                        :widgets="designer.widgets.value"
                    />
                </div>
            </a-col>
            <a-col :span="5">
                <!-- 配置 -->
                <div class="form-setting-container h-full">
                    <form-setting
                        ref="formSettingRef"
                        :designer="designer"
                        :cur-widget="designer.curWidget"
                    />
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import widgetDraggable from '@/xyFDesigner/components/widgetDraggable/index.vue'
import formSetting from '@/xyFDesigner/components/formSetting/index.vue'
import designerBox from '@/xyFDesigner/components/designer/index.vue'
import { onBeforeMount, onMounted, ref, useTemplateRef } from 'vue'
import type { BaseWidgetType, DesignerType } from './type'
import { useCreateDesigner } from './hooks/designer'

const designer:DesignerType = useCreateDesigner()

const formSettingRef = useTemplateRef('formSettingRef')
const widgetListRef = useTemplateRef('widgetListRef')
const getWidgets = ()=>{
    return designer.widgets.value
}
const setWidgets = (newWidgets: BaseWidgetType[]) => {
    designer.widgets.value = newWidgets
}

const validateFormSetting = async ()=>{
    return await formSettingRef.value?.validateFormSetting()
}

onMounted(()=>{
    formSettingRef.value?.initComp()
    widgetListRef.value?.initComp()
})

defineExpose({
    getWidgets,
    setWidgets,
    validateFormSetting
})
</script>

<style lang='scss' scoped>
.xy-f-designer{
    height: 100%;
}
</style>